<template>
  <div class="container">
    <div class="background">
      <img class="bgIMG" src="@/assets/img/background.png">
    </div>
    <div class="loginCard">
      <div class="loginIMG">
        <img class="loginIMG" src="@/assets/img/login.png">
      </div>
      <div class="loginContent">
        <div class="login-title">登录 / Login</div>
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login_form">
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom"
              placeholder="用户名"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" prefix-icon="el-icon-lock"
              type="password" placeholder="密码"></el-input>
          </el-form-item>
          <!-- 按钮区域 -->
          <el-form-item>
            <el-button class="loginBtn" type="primary" @click="login">
              <span style="margin-right: 30px">登</span>
              <span>录</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/network/request'

export default {
  name: 'index',
  created () {
    this.$store.commit('removeUser')
    const that = this
    document.onkeydown = function (e) {
      e = window.event || e
      if (that.$route.path === '/login' && (e.code === 'Enter' || e.code === 'enter')) {
        // 验证在登录界面和按得键是回车键enter
        that.login()// 登录函数
      }
    }
  },
  data () {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: '',
        password: ''
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [{
          required: true,
          message: '请输入登录名',
          trigger: 'blur'
        }, {
          min: 3,
          max: 10,
          message: '长度在 3 到 10 个字符',
          trigger: 'blur'
        }],
        // 验证密码是否合法
        password: [{
          required: true,
          message: '请输入登录密码',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    // 点击重置按钮，重置登录表单
    // resetLoginForm () {
    //   this.$refs.loginFormRef.resetFields()
    // },
    // 登录提交表单
    login () {
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return
        request({
          url: 'user/login',
          method: 'post',
          params: this.loginForm
        }).then(res => {
          if (res.data.data === null) return this.$message.error(res.data.message)
          this.$message.success('登录成功')
          // 保存token
          const userId = res.data.data.randomID
          const username = res.data.data.name
          const role = res.data.data.position
          this.$store.commit('setUser', { userId, username, role })
          // 发生页面跳转
          this.$router.push({ path: '/productOperateManagement/home' })
        })
      })
    }
  }
}
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100vh;
  }
  .background {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    filter: blur(8px);
    z-index: -1;
    position: absolute;
  }
  .bgIMG {
    width: 100%;
    height: 100%;
  }
  .loginCard {
    width: 1190px;
    height: 600px;
    display: flex;
    background-color: RGB(25, 26, 44);
    margin: auto;
    border-radius: 20px;
    z-index: 1;
  }
  .loginIMG {
    width: 650px;
    height: 600px;
  }
  .loginContent {
    width: 540px;
    text-align: center;
  }
  .login-title {
    line-height: 100px;
    margin-top: 80px;
    margin-bottom: 20px;
    font-size: 32px;
    color: #e5e9f2;
  }
  >>> .el-input__inner{
    width: 360px;
    height: 60px;
    border-radius: 30px;
    padding-left: 50px;
  }
  .el-input {
    font-size: 22px;
    margin-top: 20px;
  }
  >>> .el-input__prefix {
    margin-left: 100px;
  }
  >>> .el-input__icon {
    margin-top: 2px;
  }
  >>> .el-form-item__error {
    margin-left: 100px;
    font-size: 16px;
  }
  .loginBtn {
    width: 360px;
    height: 60px;
    border-radius: 30px;
    background-color: RGB(30,52,91);
    font-size: 22px;
    margin-top: 20px;
  }
</style>
